Cómo funciona la tabla de contenidos con anclas HTML
Una tabla de contenidos con anclas HTML funciona mediante el atributo id en los títulos del artículo. Cuando el usuario hace clic en un enlace de la tabla, el navegador desplaza la página hasta el elemento que tiene ese id.
Esta herramienta genera dos cosas simultáneamente: el HTML de la tabla de contenidos con los enlaces, y el HTML de cada título con el id correspondiente que debes añadir a tu artículo. Sin el id en el título, el enlace de la tabla no funcionará.
| Paso | Qué hacer | Ejemplo |
|---|---|---|
| 1. Pegar el texto | Pega tu artículo en el campo de texto | Texto completo con títulos |
| 2. Generar la tabla | La herramienta detecta H2, H3 y H4 | Se genera automáticamente |
| 3. Copiar el HTML de la tabla | Pégalo antes del primer H2 del artículo | Tab "HTML" → Copiar |
| 4. Añadir los ids a los títulos | Sustituye tus títulos por los de la pestaña "Títulos con ID" | <h2 id="seccion-1"> |
Formatos de entrada reconocidos por esta herramienta
La herramienta detecta títulos en tres formatos distintos. El más recomendado para pegar texto directamente desde un editor de texto o documento es el formato Markdown, usando ## para H2, ### para H3 y #### para H4. También reconoce HTML directo con etiquetas <h2>, <h3> y <h4>. Para texto plano sin marcado, detecta líneas que parecen títulos por su longitud y formato.
Si tu artículo está en WordPress, la forma más rápida es copiar el contenido desde el editor de texto (HTML) de WordPress — la herramienta detectará automáticamente las etiquetas de título existentes.
Preguntas frecuentes sobre tablas de contenidos
Una tabla de contenidos con anclas HTML mejora el SEO de tres formas. Primero, ayuda a Google a entender la estructura y profundidad del artículo, lo que puede generar sitelinks (los enlaces adicionales que aparecen bajo tu resultado en las SERPs). Segundo, mejora la experiencia del usuario permitiendo saltar directamente a la sección que le interesa, lo que reduce la tasa de rebote. Tercero, las anclas HTML permiten enlazar directamente a secciones específicas desde otros artículos o desde redes sociales. Para artículos de más de 1.500 palabras, una tabla de contenidos es prácticamente obligatoria. Verifica en Google Search Console si tu tabla genera sitelinks.
Una ancla HTML tiene dos partes: el enlace en la tabla (con href="#id-de-la-seccion") y el atributo id en el título de destino (id="id-de-la-seccion"). Por ejemplo: en la tabla pones <a href="#engagement-rate">¿Qué es el engagement rate?</a> y en el título del artículo añades <h2 id="engagement-rate">¿Qué es el engagement rate?</h2>. El id debe estar en minúsculas, sin tildes, sin espacios (usa guiones) y ser único en la página. Esta herramienta genera automáticamente los ids y el HTML completo listo para copiar y pegar. Verifica siempre que los ids del HTML generado coincidan con los de tus títulos.
Depende de la longitud y complejidad del artículo. Para artículos informativos de menos de 2.000 palabras, incluir solo H2 suele ser suficiente y resulta más limpio visualmente. Para guías largas o documentación técnica con muchas subsecciones, incluir H3 también aporta valor porque ayuda al usuario a navegar con más precisión. Incluir H4 en la tabla de contenidos raramente aporta valor — suelen ser demasiado específicos para una visión general. Esta herramienta detecta H2 y H3 por defecto, con opción de incluir H4. Verifica siempre que la tabla no sea tan larga que ocupe más espacio que el propio contenido.
Lo más efectivo es colocarla justo después del primer párrafo introductorio y antes del primer H2. Google puede mostrar los elementos de la tabla como sitelinks cuando la tabla está cerca del inicio del artículo. Algunos sitios la colocan antes del primer párrafo, inmediatamente después del H1 — esto también funciona bien. Lo que no se recomienda es colocarla a mitad del artículo o al final. Para artículos muy cortos (menos de 800 palabras) con 2-3 secciones, una tabla de contenidos puede ser innecesaria y ocupar más espacio del que aporta. Verifica siempre la experiencia en móvil ya que la tabla puede ocupar mucha pantalla.
WordPress por defecto no genera tablas de contenidos. Para añadirlas tienes varias opciones: plugins como "Table of Contents Plus" o "Easy Table of Contents" que las generan automáticamente, el bloque nativo de WordPress si usas el editor Gutenberg (aunque requiere configuración), o añadir el HTML manualmente en el editor. Esta herramienta es especialmente útil si escribes en un CMS que no tiene plugins de tabla de contenidos, si usas un editor de texto externo, o si quieres control total sobre el HTML generado sin depender de plugins. Verifica siempre que el HTML generado sea compatible con tu CMS.
Una tabla de contenidos bien diseñada puede aumentar o disminuir el tiempo de permanencia dependiendo del contenido. En artículos donde el usuario busca una respuesta específica, la tabla le permite llegar directamente a esa sección, lo que puede reducir el tiempo total pero aumentar la satisfacción. En artículos donde el usuario explora todo el contenido, la tabla actúa como índice que fomenta la lectura completa. Google valora la satisfacción del usuario más que el tiempo bruto de permanencia. Si la tabla ayuda al usuario a encontrar lo que busca rápidamente, es una señal positiva independientemente del tiempo. Verifica en Google Analytics el comportamiento de los usuarios en páginas con y sin tabla.
Lo más recomendable es que los ids estén en el mismo idioma que el contenido, sin tildes ni caracteres especiales. "engagement-rate" y "tasa-de-interaccion" son igualmente válidos técnicamente. Sin embargo, hay una ventaja práctica en usar ids cortos y descriptivos: son más fáciles de copiar y enlazar manualmente desde otros artículos. Si tu keyword principal está en inglés (como "engagement rate"), usar el término en inglés para el id puede ser útil para consistencia. Esta herramienta genera los ids eliminando tildes, espacios y caracteres especiales del texto del título automáticamente. Verifica siempre que los ids sean únicos en la página y no contengan espacios.
Sí. La herramienta genera HTML estándar compatible con cualquier plataforma web: WordPress, Webflow, Wix, Squarespace, Ghost, Shopify o HTML puro. El único requisito es que puedas editar el HTML de tu artículo para añadir los atributos id a los títulos. En WordPress con el editor clásico puedes cambiar a vista "Texto" (HTML) para añadir los ids. En Gutenberg, cada bloque de título tiene una opción de "ancla HTML" en la configuración avanzada del bloque. En Webflow y otros constructores visuales, el atributo id suele estar disponible en las opciones del elemento. Verifica siempre la documentación de tu CMS para saber dónde añadir el atributo id a los títulos.